<template>
	<view>
		<view v-for="(item, index) in currentAdList" :key="index">
			<view v-if="item.type == 'single'" class="flex space box-shadow pd30 bdr16">
				<view class="unio2o-tuan-ad-img">
					<image mode="aspectFill" class="bdr8" :src="item.images[0]"></image>
				</view>
				<view class="unio2o-tuan-ad-info pl20">
					<view class="ft16 ftw600 text-main text-over2">
						{{ item.title }}
					</view>
					<view class="flex alcenter  mt10">
						<view class="text-price">
							<text class="ft14">￥</text>
							<text class="ft16 ftw600">{{ item.price }}</text>
						</view>
						<view class="text-notice text-line ft12 ml10">
							¥{{ item.originalPrice }}
						</view>
						<view class="ft12 ml30 tag-zk text-w">{{ item.discount }}折</view>
					</view>
					<view class="flex alcenter space mt20">
						<view class="ft14 text-notice">
							<text>距我</text>
							<text class="text-theme">{{ item.distance }}</text>
						</view>
						<view class="flex alcenter unio2o-ad-tag">
							<view class="tag-ad">广告</view>
							<view class="tag-closed ml20 iconfont iconbtn_close_black"></view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="box-shadow pd30 bdr16">
				<view class="flex alcenter space">
					<view class="unio2o-ad-title text-over ft16 ftw600 text-main">
						{{ item.title }}
					</view>
					<view class="flex alcenter unio2o-ad-tag">
						<view class="tag-ad">广告</view>
						<view class="tag-closed ml20 iconfont iconbtn_close_black"></view>
					</view>
				</view>
				<view class="flex alcenter space mt20">
					<view class="flex alcenter">
						<view class="text-price">
							<text class="ft14">￥</text>
							<text class="ft16 ftw600">{{ item.price }}</text>
						</view>
						<view class="text-notice text-line ft12 ml10">
							¥{{ item.originalPrice }}
						</view>
						<view class="ft12 ml30 tag-zk text-w">{{ item.discount }}折</view>
					</view>
					<view class="ft14 text-notice">
						<text>距我</text>
						<text class="text-theme">{{ item.distance }}</text>
					</view>
				</view>

				<view class="flex space mt20">
					<view class="unio2o-ad-img-item" v-for="(img, index) in item.images" :key="index">
						<image mode="aspectFill" class="bdr8" :src="img"></image>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		adList: {
			type: Array,
			default: []
		}
	},
	data() {
		return {
			// 默认广告数据
			defaultAdList: [
				{
					title: '卡夫卡少儿45分钟舞蹈免费公开课',
					price: 299,
					originalPrice: 1299,
					discount: '2.3',
					distance: '1.2km',
					type: 'single',
					images: [
						'https://picsum.photos/seed/gym1/300/300.jpg',
						'https://picsum.photos/seed/gym2/300/300.jpg',
						'https://picsum.photos/seed/gym3/300/300.jpg'
					]
				}
			]
		}
	},
	computed: {
		currentAdList() {
			// 如果提供了adData，则使用adData，否则使用默认数据
			return this.adList || this.defaultAdList;
		}
	}
}
</script>

<style>
.unio2o-tuan-ad-img {
	width: 200rpx;
}

.unio2o-tuan-ad-img image {
	width: 100%;
	height: 200rpx;
}

.unio2o-tuan-ad-info {
	width: calc(100% - 200rpx);
}

.unio2o-ad-tag .tag-ad,
.unio2o-ad-tag .tag-closed {
	background: #FFFFFF;
	border-radius: 4rpx;
	border: 2rpx solid #CCCCCC;
	color: #999999;
	padding: 4rpx 8rpx;
	font-size: 24rpx;
}

.unio2o-ad-tag .tag-closed {
	border-radius: 18rpx;
	padding: 4rpx 16rpx;
	font-size: 24rpx;
}

.unio2o-ad-title {
	width: calc(100% - 190rpx);
}

.unio2o-ad-img-item {
	width: 200rpx;
	height: 200rpx;
}

.unio2o-ad-img-item image {
	width: 100%;
	height: 200rpx;
}
</style>
